<template> 
	<div  class='main'> 
		<div  class='minorNav'> 
				<span  v-for='(item,index)  in minorNavdata '  :key='index'  :class='{active:currentIndex==index}'  @click='chooseNav(index)'>{{item.title}}</span> 
	    </div>
	    <a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  :delay="delayTime">
			<a-row :gutter="32"  v-if='previousData.length>0'>
			  <div  class='ft18 mt20 mb20 color-main fontWeight'><span class='dot-title' style='margin:0 15px;'></span>推荐产品</div>
		      <a-col class="gutter-row" :span="6"  v-for='(item,index) in previousData'  :key='index'>
		        <div class="gutter-box"  >
		        	<div  class='gutter-title'><span>{{item.name}}</span></div>
		        	<ul  class='gutter-content'>
		        		<li>规模：<span  class='color-minor  ft22  '> {{item.size}}万</span></li>
		        		<li>起投金额：<span  class="color-main ft20  "> {{item.startingAmt}}万</span></li>
		        		<li>发行方：<span  class='color-333 overSpill w-70 inline-block'  :title='item.issuer'>&nbsp;{{item.issuer}}</span></li>
		        		<li>存续周期：<span  class='color-333 '> {{item.subsistingCycle}}个月</span> </li>

		        		<div  class='text-center'>
		        			<a-button   class='mt28'  ghost   style='background-color: #fff;color:#FF9203;border-color:#FF9203'><router-link  :to='{path:"/currentSell/detail",query:{code:item.code}}'>查看详情</router-link></a-button>
		        		</div>
		        		
		        	</ul>
		        </div>
		      </a-col>
		    </a-row>  
		    <div  class='ft18 mt20 mb20 color-main fontWeight'><span class='dot-title mr15' ></span>所有产品</div> 
			 <ul   style="margin-bottom: 40px;">
				<li  v-for='item in data' class='mb28'>
					<div  class='product_content'>
						<a-row >
			      			<a-col class="product_title ft16  color-white" :span="4" >
			      				<span>{{item.name}}</span>
			      			</a-col>
			      			<a-col class="gutter-row" :span="3" >
			      				<span  class='color-666'>规模</span><br /><br />
			      				<span  class='color-minor  ft22'>{{item.size}}万</span> 
			      			</a-col> 
			      			<a-col class="gutter-row" :span="3" >
			      				<span  class='color-666'>起投金额</span><br /><br />
			      				<span  class='color-main  ft22'>{{item.startingAmt}}万</span> 
			      			</a-col>
			      			<a-col class="gutter-row" :span="4" >
			      				<span  class='color-666'>发行方</span><br /><br />
			      				<span  class='ft16  overSpill  inline-block  w-80'  :title='item.issuer'>{{item.issuer}}</span> 
			      			</a-col>
			      			<a-col class="gutter-row" :span="3" >
			      				<span  class='color-666'>存续周期</span><br /><br />
			      				<span  class='ft16'>{{item.subsistingCycle}}个月</span> 
			      			</a-col>
			      			<a-col class="gutter-row" :span="3" >
			      				<span  class='color-666'>产品类型</span><br /><br />
			      				<span  class='ft16'>{{item.type | productType}}</span> 
			      			</a-col> 
			      			<a-col class="gutter-row  " :span="4" style='border-right:none; '>
			      				 <div  class='text-center'>
					        			<a-button   class='mt12'  ghost   style='background-color: #fff;color:#FF9203;border-color:#FF9203'><router-link  :to='{path:"/currentSell/detail",query:{code:item.code}}'>查看详情</router-link></a-button>
					        		</div>
			      			</a-col>
			      		</a-row>
					</div>
					 
				</li>
			</ul> 
			<span  v-if='data.length==0'>暂无产品数据</span>
		</a-spin>
		<a-divider  v-if='totalNum>=10'>
			<a-button type="link"  @click='nextPage()'  v-if='hasNext==true'>点击加载更多</a-button>
			<span  v-if='hasNext==false'  class='ft14'>加载完毕</span>
		</a-divider>
	</div> 
</template>
<script >
import { productList }  from  '@/api/home/index'
	 //  const data = [
  //   {
  //     title: ' 海峡一号-DR ',
  //     size:20000000,
  //     rate:'7.2%',
  //     amount:300000,
  //     limit:'1年'
  //   },
  //   {
  //     title: ' 海峡一号-DR ',
  //     size:20000000,
  //     rate:'7.2%',
  //     amount:300000,
  //     limit:'1年'
  //   },
  //   {
  //     title: ' 海峡一号-DR ',
  //     size:20000000,
  //     rate:'7.2%',
  //     amount:300000,
  //     limit:'1年'
  //   },
  //   {
  //     title: ' 海峡一号-DR ',
  //     size:20000000,
  //     rate:'7.2%',
  //     amount:300000,
  //     limit:'1年'
  //   },
  // ];
	export default {
		name:'currentSell',
		data(){
			return {
				spinning:false,
		    	indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' , color :'#1e49a5' }"/> ,
		    	delayTime:500,

				previousData:[],//推荐产品，最多四个
				data:[],
				currentIndex:2,
				minorNavdata:[
			        {title:'地产类'},
			        {title:'政信类'}, 
			        {title:'全部'},
			    ],
			    search:{
			    	pageNo:1,
			    	pageSize:10,
			    	type:'',
			    },
			    hasNext:true,
			    totalNum:null,
			}
		},
		created(){
			this.pageInit()
		},
		methods:{
			pageInit(){
				this.spinning = true
				let list = new Promise((resolve,reject)=>{
		  	 		productList({isRecommend:'1',type:this.search.type}).then((res)=>{
		  	 			if(res.data.flag == true){
		  	 				resolve(res.data.dataList.filter((item,index)=>{
		  	 					return index<2
		  	 				}))
		  	 			}
		  	 			else{
		  	 				reject()
		  	 			}
		  	 		})
		  	 	})
		  	 	let list2 = new Promise((resolve,reject)=>{
		  	 		productList(this.search).then((res)=>{
		  	 			if(res.data.flag == true){
		  	 				resolve(res.data)
		  	 			}
		  	 			else{
		  	 				reject()
		  	 			}
		  	 		})
		  	 	})
  
				Promise.all([list,list2]).then((res)=>{ 
					this.previousData = res[0]

					this.data = this.data.concat(res[1].dataList) 
					this.hasNext = res[1].hasNext
					this.totalNum = res[1].totalRs

					this.spinning = false
				}).catch((err)=>{
					console.log(err)
					this.spinning = false
				})
				
			},
			nextPage(){
				this.search.pageNo+=1
				this.pageInit()
			},
			chooseNav(index){
		  		this.currentIndex = index 
		  		this.search.type = index==2 ? '':(index+1)
		  		this.search.pageNo = 1 //重置为1
		  		this.data = []//重置data
		  		this.pageInit()
		  	}
		}
	}
</script>

<style  scoped="scoped">
/*次级导航*/
.minorNav{line-height:1; font-size: 16px;background-color: #fff;}

.minorNav span{display: inline-block; padding:15px 40px;}
.minorNav span:hover{cursor: pointer;}
.minorNav span.active{background-color: #1E49A5;color:#fff;}

.main{width: 1200px;margin:0 auto;padding:20px 0 60px;}
/*推荐产品 */
.dot-title{display: inline-block; width: 14px;height: 14px;background: #105DCE;border-radius: 50%;}

.listTitle{display: inline-block; font-size: 18px;padding-left: 10px;border-left:4px solid #D9B06A;color: #D9B06A;margin-bottom: 20px;}
.productShow li {display: inline-block;margin-right: 10px;width: 24%;}

.gutter-box{background-color: #fff;color:#666;border-radius: 6px;}
.gutter-box:hover{box-shadow: 5px 5px 9px 0px #e8e1e1;}
.gutter-title{display:table;width:100%;padding:5px 10px ;min-height: 58px; background: url(../../assets/img/home/product_bg.png) no-repeat  center / cover; text-align: center;font-size: 16px;color: #fff;border-radius: 6px 6px 0px 0px;}
.gutter-title span{display: table-cell;vertical-align: middle;}
.gutter-content{padding:30px 20px 30px 30px;color:#999;}
.gutter-content li{height: 32px;line-height: 32px;}
.gutter-content li>span{vertical-align: middle;}

.product_content{padding:28px 0;background:url(../../assets/img/home/property_title.png) no-repeat 0% center  #fff;border-radius: 6px;text-align: center;}
.product_content .product_title{height: 146px;padding:0 10px;display: table;}
.product_content .product_title span{display: table-cell;vertical-align: middle;}

.product_content .gutter-row{padding:40px 0 30px;border-right:2px solid #ddd;}
.line{height: 140px;width: 2px;background-color: #ddd;right:0;top:-37%;}

</style>